<template>
  <div v-show="value">
    <Card>
      <p slot="title">
        <Breadcrumb separator=">">
          <Breadcrumb-item to="/Home">个人中心</Breadcrumb-item>
          <Breadcrumb-item>机构认证</Breadcrumb-item>
        </Breadcrumb>
      </p>
      <div style="width:50%; margin: 2rem auto">
        <Steps :current="step">
          <!--  -->
          <Step title="提交资料" content=""></Step>
          <Step title="审核中" content=""></Step>
          <Step title="认证成功" content=""></Step>
        </Steps>
      </div>
      <Row class="content">

        <div v-if="authorState.authorState === 0" class="center"> <img src="../assets/validate_unsubmit.png" style="width:100px;height:100px" /></div>
        <div v-else-if="authorState.authorState === 1" class="center"> <img src="../assets/validate_submited.png" style="width:100px;height:100px" /></div>
        <div v-else-if="authorState.authorState === 2" class="center"> <img src="../assets/validate_success.png" style="width:100px;height:100px" /></div>
        <div v-else-if="authorState.authorState === 3" class="center"> <img src="../assets/validate_fail.png" style="width:100px;height:100px" /></div>
        <div :class="authorState.authorState === 3?'center fail':'center'"> {{authorStateDes}}</div>
        <div class="center"> <Button style="width:200px" :type="authorState.authorState === 3?'':'success'" @click="validate">{{authorButtonDes}} </Button></div>
        <div v-if="(authorState.authorState==3 && authorState.failReason)" class="error">
          {{authorState.failReason}}
        </div>
      </Row>

    </Card>

  </div>
</template>

<script>
// @ is an alias to /src

import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class InstitudeValidate extends Vue {
  @Prop({ type: Boolean, default: false }) value
  step = 0
  authorStateDes = ''
  authorButtonDes = ''
  stepStatus = ''

  validate() {
    if (this.authorState.authorState === 0) {
      this.$router.push('/User/Validate')
    } else if (this.authorState.authorState === 1) {
      this.$router.push('/User/Validate?id=' + this.userInfo.ylyId)
    } else if (this.authorState.authorState === 2) {
      this.$router.push('/User/Validate?id=' + this.userInfo.ylyId)
    } else if (this.authorState.authorState === 3) {
      this.$router.push('/User/Validate')
    } else {
      this.$router.push('/User/Validate')
    }
  }

  get userInfo() {
    return this.$store.getters['session/user']
  }

  get authorState() {
    const authorStates = this.$store.state.session.authorStates || {}
    return authorStates
  }

  created() {
    console.log('this.authorState.authorState==>', this.authorState.authorState)
    this.step = this.authorState.authorState
    switch (this.authorState.authorState) {
      case 0:
        this.authorStateDes = '尚未填写认证'
        this.authorButtonDes = '机构认证'
        break
      case 1:
        this.authorStateDes = '资料认证中，请耐心等待'
        this.authorButtonDes = '查看认证资料'
        break
      case 2:
        this.authorStateDes = '认证已通过'
        this.authorButtonDes = '查看认证资料'
        break
      case 3:
        this.step = 1
        this.stepStatus = 'error'
        this.authorStateDes = '认证资料未通过，请重新提交'
        this.authorButtonDes = '重新提交'
        break
      default:
        this.authorStateDes = '未认证'
        this.authorButtonDes = '机构认证'
    }
  }
}
</script>
<style scoped>
.content {
  margin: 4rem;
  font-size: 12px;
}
.center {
  font-size: 12px;
  margin: 0.5rem;
  text-align: center;
}
.fail {
  color: #ff2e2e;
  font-size: 12px;
}
.error {
  width: 50%;
  margin: 20px auto;
  padding: 10px;
  background: #fff9f9;
  border: solid 1px #ff2e2e;
  border-radius: 4px;
  color: #ff2e2e;
  font-weight: bold;
  font-size: 12px;
}
</style>
